<template>
  <div class="userSetting">
    <div class="header">
      <div class="title">
        <i-icon type="return" @click="backToUserCenter" i-class="userSettingBackIcon" />个人信息
      </div>
    </div>
    <div class="content">
      <div @click="modifyIndex(0)" class="keyWrapper">
        <span class="title">头像</span>
        <span class="value">{{nickName}}</span>
      </div>
      <div @click="modifyIndex(1)" class="keyWrapper">
        <span class="title">昵称</span>
        <span class="value">{{nickName}}</span>
      </div>
      <div class="modifyWrapper" v-if="currentIndex === 1">
        <div class="input">
          <i-input :value="nickName" title="昵称" autofocus placeholder="请输入昵称" />
        </div>
        <div class="btn">
          <i-button bind:click="handleClick" i-class="userSettingBtn">确认</i-button>
          <i-button bind:click="handleClick" i-class="userSettingBtn">取消</i-button>
        </div>
      </div>
      <div @click="modifyIndex(2)" class="keyWrapper">
        <span class="title">手机号</span>
        <span class="value">{{nickName}}</span>
      </div>
      <div class="modifyWrapper" v-if="currentIndex === 2">
        <div class="input">
          <i-input :value="nickName" title="手机号" autofocus placeholder="请输入昵称" />
        </div>
        <div class="btn">
          <i-button bind:click="handleClick" i-class="userSettingBtn">确认</i-button>
          <i-button bind:click="handleClick" i-class="userSettingBtn">取消</i-button>
        </div>
      </div>
      <div @click="modifyIndex(3)" class="keyWrapper">
        <span class="title">账号ID</span>
        <span class="value">{{nickName}}</span>
      </div>
      <div class="modifyWrapper" v-if="currentIndex === 3">
        <div class="input">
          <i-input :value="nickName" title="账号ID" autofocus placeholder="请输入昵称" />
        </div>
        <div class="btn">
          <i-button bind:click="handleClick" i-class="userSettingBtn">确认</i-button>
          <i-button bind:click="handleClick" i-class="userSettingBtn">取消</i-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "userSetting",
  data() {
    return {
      currentIndex: null,
      nickName: "zzw"
    };
  },
  methods: {
    backToUserCenter() {
      this.$router.back();
    },
    modifyIndex(index) {
      if (index === this.currentIndex) {
        index = null;
      }
      this.currentIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
.userSetting {
  background-color: #f3f1f4;
  height: 100vh;
  .header {
    width: 100%;
    height: 150rpx;
    background-color: #f3f1f4;
    box-sizing: border-box;
    padding: 0 20rpx;
    position: relative;
    .title {
      display: inline-block;
      margin-top: 40rpx;
      width: 100%;
      color: #000000;
      line-height: 60rpx;
      height: 60rpx;
      font-size: 36rpx;
    }
  }
  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #ffffff;
    padding-bottom: 0;
    .keyWrapper {
      width: 100%;
      box-sizing: border-box;
      line-height: 80rpx;
      height: 80rpx;
      background-color: #ffffff;
      border-bottom: 2rpx solid #f3f1f4;
      font-size: 32rpx;
      .title {
        float: left;
      }
      .value {
        float: right;
      }
    }
    .modifyWrapper {
      border-bottom: 2rpx solid #f3f1f4;
      .input {
        display: inline-block;
        width: 60%;
      }
      .btn {
        display: inline-block;
        width: 40%;
      }
    }
  }
}
</style>

<style lang="scss">
.userSettingBackIcon {
  display: inline-block !important;
  font-size: 18px !important;
  line-height: 60rpx !important;
  height: 60rpx !important;
  vertical-align: baseline !important;
}
.userSettingBtn {
  display: inline-block !important;
  height: 50rpx !important;
  line-height: 50rpx !important;
}
</style>

